<template>
  <div v-if="dialogValue" class="add-page">
    <BackPage title="国有资产不动产详情" show-back @back="onPageBack" />
    <div class="user1-add-box f-g">
      <TitleBox title="基本信息" style="margin: 20px 0" />
      <div class="f-r">
        <div class="c-table" style="margin-right: 20px;width: 48%;height: 813px">
          <table cellspacing="0" cellpadding="0" border="0">
            <tr>
              <td class="bg-td">
                单位
              </td>
              <td>{{ currentDetail.unitName }}</td>
            </tr>
            <tr>
              <td class="bg-td">
                登记单位名称
              </td>
              <td>{{ currentDetail.regUnit }}</td>
            </tr>
            <tr>
              <td class="bg-td">
                房屋坐落地址
              </td>
              <td>{{ currentDetail.hoseLocaltion }}</td>
            </tr>
            <tr>
              <td class="bg-td">
                目前使用单位
              </td>
              <td>{{ currentDetail.useUnit }}</td>
            </tr>
            <tr>
              <td class="bg-td">
                建筑面积(m2)
              </td>
              <td>{{ currentDetail.buildArea }}</td>
            </tr>
            <tr>
              <td class="bg-td">
                土地面积( m2)
              </td>
              <td>{{ currentDetail.landArea }}</td>
            </tr>
            <tr>
              <td class="bg-td">
                补办类型
              </td>
              <td>{{ currentDetail.handlingType }}</td>
            </tr>
            <tr>
              <td class="bg-td">
                节点
              </td>
              <td>{{ currentDetail.nodePoint }}</td>
            </tr>
            <tr>
              <td class="bg-td">
                项目类别
              </td>
              <td>{{ currentDetail.projectCategory }}</td>
            </tr>
            <tr v-for="item in detailRowList">
              <td class="bg-td">
                {{ item.label }}
              </td>
              <td v-if="item.func">{{ item.func(currentDetail[item.key]) }}</td>
              <td v-else>{{ currentDetail[item.key] }}</td>
            </tr>

          </table>
        </div>
        <div class="f-g c-table" style="width: 48%">
          <table>
            <tr v-for="item in detailRowList2">
              <td class="bg-td">
                {{ item.label }}
              </td>
              <td>
                <div style="width: 100%;height: 200px;overflow:auto;">
                  {{ currentDetail[item.key] }}
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <TitleBox title="补办进度" style="margin: 20px 0" />
      <div class="f-r j-e">
        <el-form>
          <el-form-item>
            <el-button type="primary" @click="onAdd">添加补办进度</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="table-box">
        <el-table
          v-loading="loading"
          height="400px"
          stripe
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect"
        >
          <el-table-column type="index" width="80px" label="序号" align="center" />
          <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" align="center" />
          <el-table-column label="操作" fixed="right" width="120px">
            <template slot-scope="scope">
              <el-button type="text" @click="onEdit(scope.row)">编辑</el-button>
              <el-button type="text" @click="onDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </div>
    <ItemAdd ref="ItemAddRef" @get-page="initData" />

  </div>
</template>

<script>
import crud from '@/mixins/crud'
import ItemAdd from './add'
import { http_assets } from '@/api'
export default {
  name: 'User',
  components: {
    ItemAdd
  },
  mixins: [crud],
  data() {
    return {
      detailRowList: [
        { label: '片区', key: 'area' },
        { label: '性质', key: 'nature' },
        { label: '有无房产证', key: 'isCert', func: (value) => value ? '是' : '否' },
        { label: '产权人', key: 'propertyOwner' },
        { label: '房产证号', key: 'houseCert' }
      ],
      detailRowList2: [
        { label: '具体情况', key: 'situation' },
        { label: '存在问题', key: 'problem' },
        { label: '建议', key: 'advise' },
        { label: '备注', key: 'remark' }
      ],
      request: {
        delete: http_assets.item_delete
      },
      dialogValue: false,
      currentDetail: {},
      columns: [
        { prop: 'time', label: '时间' },
        { prop: 'hundingContent', label: '内容' }
      ],
      assetId: ''
    }
  },
  methods: {
    initData() {
      // 补办进度
      http_assets.itemPage(this.assetId).then(res => {
        this.tableData = res.data.records
      })
    },
    open(item) {
      this.assetId = item.id
      http_assets.read(item.id).then(res => {
        this.currentDetail = res.data
      })
      this.initData()
      this.dialogValue = true
    },
    onPageBack() {
      this.dialogValue = false
    },
    onAdd() {
      this.$refs.ItemAddRef.open(this.currentDetail.id)
    },
    onEdit(item) {
      this.$refs.ItemAddRef.open(this.currentDetail.id, item)
    }
  }
}
</script>

<style scoped lang="scss">
.add-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
}
.user1-add-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 30px;
}
</style>
